import React, { useEffect ,useRef, useState} from 'react'


import { getProListFn } from '../../api/pro'

import { Button, Table, Image } from 'antd'
import  ExportJsonExcel  from  'js-export-excel'


// cnpm i js-export-excel  导出文件所需要的依赖
export default function Export() {

    const [proList, setProList] = useState([])

    useEffect(() => {
        getProListFn().then(res => { 
            // console.log(res);
            setProList(res.data)
        })
    }, [])



        const columns = [
            { 
                title: '商品图片', 
                dataIndex: 'img1',
                render: (v) => {
                    return <Image src={v} style={{ width: 100 }} alt="加载失败" />
                } 
            },
            { 
                title: '商品名称', 
                dataIndex: 'proname' 
            },
            { 
                title: '商品分类', 
                dataIndex: 'category' 
            },
            { 
                title: '商品价格', 
                dataIndex: 'originprice' 
            },
            { 
                title: '商品折扣', 
                dataIndex: 'discount' 
            },
        ]
        const exportClick = () => { 
            // 1.配置导出内容
            const option={
                fileName:Date.now(),
                datas:[
                    {
                        // 数据源
                        sheetData:proList,
                        // 工作表名称
                        sheetName:'商品',
                        // 要导出的字段，字段一定要在 proList 中存在
                        sheetFilter:['proid','img1','proname','category','originprice','discount'],
                        // 表头名称
                        sheetHeader:['商品id','商品图片','商品名称','商品分类','商品价格','商品折扣'],
                        // 列宽
                        columnWidths:[20,30,70,10,10,10],
                    },
                    {
                        sheetData:[
                            { name: '张三' ,age: 18 },
                            { name: 'dw' ,age: 35 },
                            { name: '34' ,age: 56 },
                            { name: 'ef' ,age: 51 },
                            { name: 'gre' ,age: 83 },
                            { name: '张eeg三' ,age: 48 },
                            
                        ],
                        sheetName:'sheet1',
                        sheetFilter:['name','age'],
                        sheetHeader:['姓名','年龄'],
                    }
                ]
            }

            // 2. 通过配置项创建一个 Excel 文件
            const excel = new ExportJsonExcel(option)

            // 将文件保存在本地
            excel.saveExcel()

        }

    return (
        <div>
            <Button onClick={exportClick} style={{fontWeight:500,color:'#58c'}}>导出文件</Button>
            <Table
                dataSource={proList}
                columns={columns}
                rowKey={'proname'}
                scroll={{ y: 450 }}
            ></Table>
        </div>
    )
}
